<template>
    <div class="app-container">
        <div class="table-wrapper">
            <h4>建筑物震害信息</h4>
            <el-form class="form-inline" :inline="true" ref="formRef" :rules="rules" label-position="right" :model="params"
                label-width="200px">
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="编号：" class="form-item" prop="number">
                            <el-input v-model="params.number" placeholder="" clearable :disabled="!isAdd" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="用途：">
                            <el-col :span="11">
                                <el-form-item prop="use0">
                                    <el-select v-model="params.use0" placeholder="请选择" class="form-select"
                                        @change="useChange" clearable>
                                        <el-option v-for="item in useOptions" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="use1">
                                    <el-select v-model="params.use1" placeholder="请选择" class="form-select" clearable>
                                        <el-option v-for="item in use1Options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="区域：" class="form-item" prop="province">
                            <el-form-item prop="province" style="width:120px;margin-right:10px;">
                                <el-select v-model="params.province" placeholder="请选择省" @change="chooseProvince" clearable
                                    :disabled="!isAdd" value-key="id">
                                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="city" style="width:120px;margin-right:10px;">
                                <el-select v-model="params.city" placeholder="请选择市" @change="chooseCity" clearable
                                    :disabled="!isAdd" value-key="id">
                                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="county" style="width:120px;">
                                <el-select v-model="params.county" placeholder="请选择县" @change="chooseCounty" clearable
                                    :disabled="!isAdd" value-key="id">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="结构类型：" prop="structureType">
                            <el-col :span="11">
                                <el-form-item prop="structureType">
                                    <el-select v-model="params.structureType" placeholder="请选择" class="form-select"
                                        @change="structureTypeChange" clearable :disabled="!isAdd && !isEdit">
                                        <el-option v-for="item in structureTypeOptions" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="structureType1">
                                    <el-select v-model="params.structureType1" placeholder="请选择" class="form-select"
                                        clearable :disabled="!isAdd && !isEdit">
                                        <el-option v-for="item in structureType1Options" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="层数：" class="form-item" prop="cs">
                            <el-select v-model="params.cs" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in csOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="建造年代：" class="form-item" prop="years">
                            <el-select v-model="params.years" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="烈度:" class="form-item" prop="intensity">
                            <el-select v-model="params.intensity" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in intensityOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设防情况：" class="form-item" prop="fortification">
                            <el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable
                                :disabled="!isAdd">
                                <el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="破坏状态：" class="form-item" prop="damage">
                            <el-select v-model="params.damage" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in collapseStateOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="维护时间:" class="form-item" prop="createTime">
                            <el-date-picker v-model="params.createTime" type="date" value-format="YYYY-MM-DD"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="维护人：" class="form-item" prop="userName">
                            <el-input v-model="params.userName" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="维护人所属单位：" class="form-item" prop="maintainerUnit">
                            <el-input v-model="params.maintainerUnit" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="22">
                        <el-form-item label="备注：" class="form-item" prop="remarks" style="width: 91%;">
                            <el-input v-model="params.remarks" type="textarea" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="end">
                    <el-form-item class="bottom-button">
                        <el-button type="primary" @click="onSave(formRef)"><el-icon><Select /></el-icon>保存</el-button>
                        <el-button @click="onRest(formRef)">
                            <el-icon>
                                <Refresh />
                            </el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-row>
            </el-form>

            <!-- <el-form :inline="true" ref="tableRef" :rules="rules" label-position="right" :model="tableFormData">
                <h4>地震易损性矩阵</h4>
                <el-table class="listTables" ref="multipleTableRef" border style="width: 100%"
                    :data="tableFormData.tableData" :cell-style="{ border: '1px solid #e5ebf7' }"
                    :header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
                    <el-table-column prop="damage" label="破坏程度" align="right" width="150">
                        <el-table-column prop="intensity" label="烈度" width="150">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="基本完好">
                        <template #default="scope">
                            <el-form-item :prop="`tableData.${scope.$index}.bs`" :rules="rules.bs">
                                <span v-if="!scope.row.isEdit">
                                    {{ scope.row.bs }}
                                </span>
                                <el-input v-else v-model="scope.row.bs" size="small" type="number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="轻微破坏sl">
                        <template #default="scope">
                            <el-form-item :prop="`tableData.${scope.$index}.sl`" :rules="rules.sl">
                                <span v-if="!scope.row.isEdit">
                                    {{ scope.row.sl }}
                                </span>
                                <el-input v-else v-model="scope.row.sl" size="small" type="number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="中等破坏ml">
                        <template #default="scope">
                            <el-form-item :prop="`tableData.${scope.$index}.ml`" :rules="rules.ml">
                                <span v-if="!scope.row.isEdit">
                                    {{ scope.row.ml }}
                                </span>
                                <el-input v-else v-model="scope.row.ml" size="small" type="number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="严重破坏el">
                        <template #default="scope">
                            <el-form-item :prop="`tableData.${scope.$index}.el`" :rules="rules.el">
                                <span v-if="!scope.row.isEdit">
                                    {{ scope.row.el }}
                                </span>
                                <el-input v-else v-model="scope.row.el" size="small" type="number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="倒塌c">
                        <template #default="scope">
                            <el-form-item :prop="`tableData.${scope.$index}.c`" :rules="rules.c">
                                <span v-if="!scope.row.isEdit">
                                    {{ scope.row.c }}
                                </span>
                                <el-input v-else v-model="scope.row.c" size="small" type="number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="isAdd || isEdit" label="操作" fixed="right">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="handleBrickModify(scope.$index, scope.row)">
                                {{ scope.row.isEdit ? '应用' : '修改' }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form> -->
        </div>
        <!-- echarts图表 -->
        <!-- <div class="div-echarts seismic-fragility-bar"></div> -->
        <!-- <div class="div-echarts seismic-fragility-line"></div> -->
    </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
// 引入接口
import { getInfo } from '@/api/login';
import {
    // 根据id获取详情信息
    getBuildingsByIdApi,
    // 根据编号获取详情信息
    getBuildingsByNumber,
    // 修改基础信息
    updateBuildings,
    // 修改信息
    updateBuildingsForm,
} from "@/api/importData/buildingDamageData";
// 行政区划数据接口
import { getProvince, getChildArea } from "@/api/system/division";
// 公用方法
import { parseTime } from "@/utils/ruoyi.js";
// 引入echarts
import * as echarts from "echarts";
// 引入store
import useUserStore from '@/store/modules/user';
import useDictStore from '@/store/modules/dict';
// 获取pinia
const userStore = useUserStore();
const dictStore = useDictStore();
// 用户名
const userName = computed(() => userStore.name || '');
// 所属机构名称
const orgName = computed(() => userStore.orgName || '');

// 当前实例
const { proxy } = getCurrentInstance();
// 当前路由
const route = useRoute();
// 表单对象
const formRef = ref();

// 是否是新增页，有路由参数是详情页，否则是新增页
let isAdd = computed(() => (route.query.number ? false : true));
let isEdit = computed(() => (route.query.number && route.query.edit ? true : false));

//最多保留N小数 ,N 在 options {decimals: N} 中定义
const positivedecimals = (rule, value, callback) => {
    value = String(value);
    if (
        value.indexOf(".") != -1 &&
        (value.split(".").length > rule.options.decimals ||
            value.split(".")[0] === "" ||
            value.split(".")[1] === "")
    ) {
        callback(new Error()); //防止输入多个小数点
    } else if (
        value.indexOf(".") != -1 &&
        value.split(".")[1].length > rule.options.decimals
    ) {
        callback(new Error()); //小数点后两位
    } else {
        callback();
    }
};

const data = reactive({
    // 表单参数
    params: {
        number: "",//编号
        use0: "",//用途
        use1: "",
        region: "",//区域
        province: "",//省
        city: "",//省
        county: "",//省
        structureType: "", //结构类型
        structureType1: "",
        cs: "",//层数
        years: "",//建造年代
        intensity: '', //烈度
        fortification: "", //设防情况
        damage: '', //破坏状态
        remarks: "",//备注
        createTime: parseTime(new Date()), //维护时间
        userName: userName.value, //维护人
        maintainerUnit: orgName.value, //维护人所属单位
    },
    // 表单验证规则
    rules: {
        number: [{ required: true, message: '', trigger: 'blur' }],
        region: [{ required: true, message: '请选择区域', trigger: 'change' }],
        province: [{ required: true, message: '请选择', trigger: 'change' }],
        years: [{ required: true, message: '请选择', trigger: 'change' }],
        intensity: [{ required: true, message: '请选择', trigger: 'change' }],
        damage: [{ required: true, message: '请选择', trigger: 'change' }],
        fortification: [{ required: true, message: '请选择', trigger: 'change' }],
        structureType: [{ required: true, message: '请选择', trigger: 'change' }],
        bs: [
            { required: true, message: "请输入正确数值，最多保留两位小数", trigger: "blur" },
            {
                message: "请输入正确数值，最多保留两位小数",
                validator: positivedecimals,
                options: { decimals: 2 },
                trigger: ["change", "blur"],
            },
        ],
        sl: [
            { required: true, message: "请输入正确数值，最多保留两位小数", trigger: "blur" },
            {
                message: "请输入正确数值，最多保留两位小数",
                validator: positivedecimals,
                options: { decimals: 2 },
                trigger: ["change", "blur"],
            },
        ],
        ml: [
            { required: true, message: "请输入正确数值，最多保留两位小数", trigger: "blur" },
            {
                message: "请输入正确数值，最多保留两位小数",
                validator: positivedecimals,
                options: { decimals: 2 },
                trigger: ["change", "blur"],
            },
        ],
        el: [
            { required: true, message: "请输入正确数值，最多保留两位小数", trigger: "blur" },
            {
                message: "请输入正确数值，最多保留两位小数",
                validator: positivedecimals,
                options: { decimals: 2 },
                trigger: ["change", "blur"],
            },
        ],
        c: [
            { required: true, message: "请输入正确数值，最多保留两位小数", trigger: "blur" },
            {
                message: "请输入正确数值，最多保留两位小数",
                validator: positivedecimals,
                options: { decimals: 2 },
                trigger: ["change", "blur"],
            },
        ],
    },
    // 预选项
    // 层数
    csOptions: dictStore.csOptions || [],
    // 设防情况
    fortificationOptions: dictStore.fortificationOptions || [],
    // 年份
    yearsOptions: dictStore.yearsOptions || [],
    // 烈度
    intensityOptions: dictStore.intensityOptions || [],
    // 破坏状态
    collapseStateOptions: dictStore.collapseStateOptions || [],
    // 结构类型
    structureTypeOptions: dictStore.structureTypeOptions || [],
    structureType1Options: [],
    // 用途
    useOptions: dictStore.useOptions || [],
    use1Options: [],
    //表格
    tableFormData: {
        tableData: []
    },
})
const {
    params,
    csOptions,
    fortificationOptions,
    yearsOptions,
    intensityOptions,
    collapseStateOptions,
    structureTypeOptions,
    structureType1Options,
    useOptions,
    use1Options,
    tableFormData,
    rules
} = toRefs(data);

// 表单初始值
let initFormParms = { ...params.value };

// 行政区划
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
    });
}
// 选择省份
function chooseProvince(value) {
    params.value.city = null;
    params.value.county = null;
    params.value.province = value.name;
    cityData.value = [];
    areaData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}
// 选择城市
function chooseCity(value) {
    params.value.city = value.name;
    params.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
// 选择区县
function chooseCounty(value) {
    params.value.county = value.name;
}

// 以下结构对应全楼层
const arrStructure = ['钢筋混凝土结构', '钢结构', '组合结构'];
// 选择结构类型
const structureTypeChange = (val) => {
    const structureTypes = structureTypeOptions.value.find(item => item.value === val)
    if (structureTypes) {
        structureType1Options.value = structureTypes.children;
    }
    // 清空选中的二级候选值
    params.value.structureType1 = '';
    // 过滤楼层预选项
    if (arrStructure.includes(val)) {
        csOptions.value = dictStore.csOptions;
    } else {
        csOptions.value = dictStore.csOptions.filter((item, index) => index < 2);
        // 切换类型时，部分类型楼层没有就"9层以上"选项，则清空
        if (params.value.cs == '9层以上') {
            params.value.cs = ''
        }
    }
}
// 选择用途
const useChange = (val) => {
    const use = useOptions.value.find(item => item.value === val)
    if (use) {
        params.value.use1 = '';
        use1Options.value = use.children;
    }
}

// 获取用户
function getUserInfo(userId) {
    getInfo(userId).then(response => {
        const { code, user } = response;
        if (user) {
            params.value.userName = user.userName;
            params.value.maintainerUnit = user.orgName;
        }
    });
};

//地震易损性矩阵表格查询
const onSearch = () => {
    // 根据Id获取数据
    getDataById();
    // 根据编号获取数据
    // getDataByNumber();
};
// 根据Id获取数据
const getDataById = () => {
    getBuildingsByIdApi({
        buildingsId: route.query.id,
    }).then((res) => {
        const { code, data } = res;
        if (code == 200 && data) {
            params.value = { ...data };
            initFormParms = { ...data };
            // 维护时间
            if (data.updateTime || data.createTime) {
                const dateTime = new Date(data.updateTime || data.createTime)
                params.value.createTime = parseTime(dateTime);
            } else {
                params.value.createTime = '';
            }
            // 根据id获取用户信息
            if (data.createUser) {
                getUserInfo(data.createUser);
            }
        }
    }).catch(err => {
        console.log(err.message);
    });
}
// 根据编号获取数据
const getDataByNumber = () => {
    getBuildingsByNumber({
        number: route.query.number,
    }).then((res) => {
        const { code, data } = res;
        if (code == 200) {
            // 渲染表格
            bulidTable(data.data);
            // 渲染柱状图
            buildChartBar(data.data);
            // 渲染曲线图
            buildChartLine(data.curve);
        }
    }).catch(err => {
        console.log(err.message);
    });
}

//保存
const onSave = async formEl => {
    if (!formEl) return;
    // 表单验证
    await formEl.validate((valid, fields) => {
        if (valid) {
            //保存
            updateBuildings({
                ...params.value
            }).then(res => {
                const { code, data, message } = res;
                if (code == 200) {
                    proxy.$modal.msgSuccess('保存成功！');
                } else {
                    proxy.$modal.msgWarning(message || '保存失败！');
                }
            }).catch(err => {
                console.log(err.message || '保存失败！');
            })
        } else {
            proxy.$modal.msgWarning('表单验证失败，请检测填写数据！');
        }
    });
};
//重置
const onRest = formEl => {
    // 重置表单，方式一
    formEl.resetFields(initFormParms);
    // 重置表单，方式二
    // proxy.resetForm('formRef');
};

//表格
let m_originTableData = null
// 表格渲染
const bulidTable = (data) => {
    // 清空
    tableFormData.value.tableData = [];
    // 排序
    data.sort((a, b) => {
        const value1 = parseInt(a.intensity);
        const value2 = parseInt(b.intensity);
        if (value1 < value2) {
            return -1;
        }
        if (value1 > value2) {
            return 1;
        }
        // 必须相等
        return 0;
    });
    m_originTableData = data;
    for (const element of data) {
        // 基础信息回显
        if (!params.value.cbhdId) {
            const objInfo = element.dataList.find(item => item.cbhdId);
            params.value = { ...objInfo };
            // 维护时间
            if (objInfo.updateTime || objInfo.createTime) {
                const dateTime = new Date(objInfo.updateTime || objInfo.createTime)
                params.value.createTime = parseTime(dateTime);
            } else {
                params.value.createTime = '';
            }
            // 根据id获取用户信息
            if (objInfo.createUser) {
                getUserInfo(objInfo.createUser);
            }
        }
        // 表格数据回显
        const item = {
            isEdit: false,
            intensity: element.intensity,
            bs: element.dataList[0] ? element.dataList[0].paramValue : '',
            sl: element.dataList[1] ? element.dataList[1].paramValue : '',
            ml: element.dataList[2] ? element.dataList[2].paramValue : '',
            el: element.dataList[3] ? element.dataList[3].paramValue : '',
            c: element.dataList[4] ? element.dataList[4].paramValue : '',
        }
        tableFormData.value.tableData.push(item)
    }
}

let m_chartBar = null
let m_chartLine = null
//柱状图
const buildChartBar = (data) => {
    if (!m_chartBar) {
        m_chartBar = echarts.init(document.querySelector('.seismic-fragility-bar'))
    }
    const xAxisData = []
    const bsData = []
    const slData = []
    const mlData = []
    const elData = []
    const cData = []
    for (const element of data) {
        xAxisData.push(element.intensity)
        bsData.push(element.dataList[0]?.paramValue || 0)
        slData.push(element.dataList[1]?.paramValue || 0)
        mlData.push(element.dataList[2]?.paramValue || 0)
        elData.push(element.dataList[3]?.paramValue || 0)
        cData.push(element.dataList[4]?.paramValue || 0)
    }
    const option = {
        toolbox: {//echart保存为图片
            show: true,
            feature: {
                mark: {
                    show: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true,
                    pixelRatio: 1,
                    title: '保存为图片',
                    type: 'png',
                    lang: ['点击保存']
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        xAxis: {
            name: "地震烈度",
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            name: "超越概率",
            type: 'value',
            axisLabel: {
                // formatter: '{value}%'
                formatter: function (value) {
                    return (value * 100) + '%'
                }
            }
        },
        series: [
            {
                name: '基本完好',
                type: 'bar',
                barWidth: '40',//设置柱宽度
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: bsData
            },
            {
                name: '轻微破坏',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: slData
            },
            {
                name: '中等破坏',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: mlData
            },
            {
                name: '严重破坏',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: elData
            },
            {
                name: '倒塌',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: cData
            },
        ]
    };
    m_chartBar.clear()
    m_chartBar.setOption(option, true)
}
//折线图
const buildChartLine = (data) => {
    if (!m_chartLine) {
        m_chartLine = echarts.init(document.querySelector('.seismic-fragility-line'))
    }
    const xAxisData = Object.keys(data.c)
    const cData = Object.values(data.c)
    const edData = Object.values(data.ed)
    const mdData = Object.values(data.md)
    const sdData = Object.values(data.sd)
    const option = {
        toolbox: {//echart保存为图片
            show: true,
            feature: {
                mark: {
                    show: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true,
                    pixelRatio: 1,
                    title: '保存为图片',
                    type: 'png',
                    lang: ['点击保存']
                }
            }
        },
        legend: {
            data: ['c', 'ed', 'md', 'sd']
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            name: "PGA:(IM)",
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            name: "超越概率",
            type: 'value',
            // axisLabel: {
            //     formatter: '{value}%'
            // }
            axisLabel: {
                // formatter: '{value}%'
                formatter: function (value) {
                    return (value * 100) + '%'
                }
            }
        },
        series: [
            {
                name: 'c',
                data: cData,
                smooth: true,
                type: 'line'
            },
            {
                name: 'ed',
                data: edData,
                smooth: true,
                type: 'line'
            },
            {
                name: 'md',
                data: mdData,
                smooth: true,
                type: 'line'
            },
            {
                name: 'sd',
                data: sdData,
                smooth: true,
                type: 'line'
            }
        ]
    };
    m_chartLine.clear()
    m_chartLine.setOption(option, true)
}

//修改 保存
const handleBrickModify = (index, row) => {
    if (row.isEdit) { // 编辑状态点击时，代表保存
        let paramsp = []
        const element = m_originTableData.find(item => item.intensity === row.intensity)
        if (element) {
            element.dataList[0].paramValue = row.bs
            element.dataList[1].paramValue = row.sl
            element.dataList[2].paramValue = row.ml
            element.dataList[3].paramValue = row.el
            element.dataList[4].paramValue = row.c
            paramsp = element.dataList
        }
        updateBuildingsForm(paramsp).then((res) => {
            if (res.code === 200) {
                row.isEdit = false;
                proxy.$modul.msgSuccess('保存成功!');
                // 重新加载数据
                onSearch();
            }
        }).catch(err => {
            console.log(err.message);
        });
    } else {
        row.isEdit = true;
    }
}

// 挂载
onMounted(() => {
    // 获取行政区划数据
    getProvinceData();
    // 查看、编辑
    if (!isAdd.value) {
        // 查询
        onSearch();
    }
});
// 卸载前
onBeforeUnmount(() => {
    if (m_chartBar) {
        m_chartBar.dispose()
        m_chartBar = null
    }
    if (m_chartLine) {
        m_chartLine.dispose()
        m_chartLine = null
    }
})
</script>

<style lang="scss" scoped>
.table-wrapper {
    position: relative;

    h4 {
        font-size: 16px;
        font-weight: bold;
        color: #107ce5;
        text-align: center;
    }

    /* 表格样式 */
    .el-table.listTables {
        thead.is-group th {
            background: none;
        }

        thead.is-group tr:first-of-type th:first-of-type {
            border-bottom: none;
        }

        thead.is-group tr:first-of-type th:first-of-type:before {
            content: '';
            position: absolute;
            width: 1px;
            height: 85px;
            /*这里需要自己调整，根据td的宽度和高度*/
            top: 0;
            left: 0;
            background-color: grey;
            opacity: 0.3;
            display: block;
            transform: rotate(302deg);
            /*这里需要自己调整，根据线的位置*/
            transform-origin: top;
        }

        thead.is-group tr:last-of-type th:first-of-type:before {
            content: '';
            position: absolute;
            width: 1px;
            height: 88px;
            /*这里需要自己调整，根据td的宽度和高度*/
            bottom: 0;
            right: 0;
            background-color: grey;
            opacity: 0.3;
            display: block;
            transform: rotate(302deg);
            /*这里需要自己调整，根据线的位置*/
            transform-origin: bottom;
            /* background:red; */
        }
    }
}

.form-inline {
    .el-form-item {
        margin-right: 0;
    }
}

/* 图表样式 */
.div-echarts {
    width: 100%;
    height: 400px;
    margin: 20px auto;
}
</style>